<!--
 * @Description: 项目管理-发起编辑项目-基本信息-项目配置
 * @Author gong
 * @create 2024/9/5 14:00
 -->
<!--setup-->
<script setup>
import { onMounted, getCurrentInstance, ref, inject } from 'vue'
import { openDrawer, openModal } from '@shared/base/open'
import RepaymentChannel from './RepaymentChannel' // 开通还款通道/开通用户结清证明
import ProofOfDebt from './ProofOfDebt' // 开通债权证明
import PreviewPage from './PreviewPage' // 预览债权证明
import { ElMessage, ElMessageBox } from 'element-plus' // messagePlus 提示

const { proxy } = getCurrentInstance()
const props = defineProps({})
const emit = defineEmits([])

/* 状态 */
// 项目基础信息
const __projBaseInfo__ = inject('__projBaseInfo__') || {}
const __coreCode__ = inject('__coreCode__') // 核心业务编码
const formData = ref({}) // 表单数据
// 项目配置项集合
const configList = ref([
  {
    label: '还款通道',
    value: 'repayChnnl',
    key: '10'
  },
  {
    label: '用户结清证明',
    value: 'userSttlChnnl',
    key: '20'
  },
  {
    label: '债转证明',
    value: 'dbtQtyProve',
    key: '30'
  },
  {
    label: '征信授权',
    value: 'creditAuthorize',
    key: '40'
  }
])

/* 方法 */
/**
 * 初始化数据
 */
const init = () => {
  formData.value = {
    repayChnnl: __projBaseInfo__.value.repayChnnl || 'N',
    userSttlChnnl: __projBaseInfo__.value.userSttlChnnl || 'N',
    dbtQtyProve: __projBaseInfo__.value.dbtQtyProve || 'N',
    creditAuthorize: __projBaseInfo__.value.creditAuthorize || 'N'
  }
}

/**
 * 处理改变数据方法
 * @param val 改变的参数 Y/N
 * @param item 项目配置项的属性 label/value/key
 */
const handleClick = (val, item) => {
  // 当选中开启时
  if (val === 'Y') {
    // 征信授权 或者 债转证明类型为单户文件时 不需要弹窗
    if (item.key === '40' || (item.key === '30' && __projBaseInfo__.value?.singleFileFlag)) return
    // 确认前保持数据不变
    formData.value[item.value] = 'N'
    // 弹窗标题
    let title = '开通' + item.label
    // 弹窗组件
    const modalObj = {
      10: () => RepaymentChannel,
      20: () => RepaymentChannel,
      30: () => ProofOfDebt
    }
    openDrawer(
      modalObj[item.key](),
      {
        configType: item.key, // 配置类型
        prjId: __projBaseInfo__.value.id, // 项目id
        prjName: __projBaseInfo__.value.prjName, // 项目名称
        prjCode: __projBaseInfo__.value.prjCode, // 项目编码
        coreCode: __coreCode__.value, // 核心业务编码
        editDebtTraAgrFlag: __projBaseInfo__.value?.editDebtTraAgrFlag // 债转证明是否开启过
      },
      {
        title: title,
        width: item.key === '30' ? '820px' : '480px',
        useDefaultButton: true,
        closeOnClickModal: false,
        async onOk(modal, component) {
          const res = await component.onSave()
          if (res) {
            // 如果是还款通道，那么展示 请同步修改结清证明配置
            if (item.key == '10') {
              ElMessage.success('请求成功，如有需要，请同步修改结清证明配置')
            } else {
              // 其他展示 请求成功
              ElMessage.success('请求成功')
            }

            formData.value[item.value] = 'Y'

            // 还款通道开启则用户结清证明也开启
            if (item.value === 'repayChnnl') {
              formData.value.userSttlChnnl = 'Y'
            }

            // 债转证明开通，可显示预览、编辑按钮
            if (item.value === 'dbtQtyProve') {
              __projBaseInfo__.value.editDebtTraAgrFlag = true
            }
            modal.close()
          }
        },
        onClose(modal) {
          modal.close()
        }
      }
    )
  } else {
    // 确认前保持数据不变
    formData.value[item.value] = 'Y'
    let titleObj = {
      10: '确定关闭在线还款吗？关闭后，客户将无法在小程序端进行还款；您可以再次开通恢复。',
      20: '确定关闭用户结清证明申请吗？关闭后，客户将无法在小程序端申请结清证明；您可以再次开通恢复。',
      30: '确定关闭债转证明吗？',
      40: '确定关闭征信授权吗？'
    }
    ElMessageBox.confirm(titleObj[item.key], `关闭${item.label}`, {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 关闭
      formData.value[item.value] = 'N'
    })
  }
}

/**
 * 编辑债转证明
 */
const onEdit = () => {
  openDrawer(
    ProofOfDebt,
    { editDebtTraAgrFlag: __projBaseInfo__.value?.editDebtTraAgrFlag, prjId: __projBaseInfo__.value.id },
    {
      title: '编辑债转证明',
      width: '820px',
      useDefaultButton: true,
      closeOnClickModal: false,
      async onOk(modal, component) {
        const formData = await component.onSave()

        if (formData) {
          ElMessage.success('请求成功')
          modal.close()
        }
      },
      onClose(modal) {
        modal.close()
      }
    }
  )
}

/**
 * 预览债转证明
 */
const onPreview = () => {
  openModal(
    PreviewPage,
    { prjId: __projBaseInfo__.value.id },
    {
      title: '预览债转证明',
      width: '400px',
      height: '680px',
      useDefaultButton: true,
      showFooter: false,
      onOk(modal) {
        modal.close()
      },
      onClose(modal) {
        modal.close()
      }
    }
  )
}

/**
 * 是否显示按钮
 * @param item
 */
const showButton = (item) => {
  return item.key === '30' && __projBaseInfo__.value?.editDebtTraAgrFlag && !__projBaseInfo__.value?.singleFileFlag
}

/**
 * 返回数据
 */
const onSave = () => {
  return formData.value
}

/* 计算 */

/* 监听 */

/* 周期 */
onMounted(() => {
  init()
})

/* 暴露 */
defineExpose({
  $: proxy.$,
  onSave
})
</script>

<!--render-->
<template>
  <div class="page">
    <!-- 内容区 -->
    <div class="page-title">
      项目配置
    </div>
    <el-row :gutter="24">
      <el-col
        v-for="item in configList"
        :key="item.key"
        :span="8"
      >
        <div class="config-item">
          <div>{{ item.label }}</div>
          <div class="flex">
            <div
              v-if="showButton(item)"
              class="flex items-center"
            >
              <el-button
                type="primary"
                link
                @click="onPreview"
              >
                预览
              </el-button>
              <el-divider direction="vertical" />
              <el-button
                type="primary"
                link
                @click="onEdit"
              >
                编辑
              </el-button>
            </div>
            <el-switch
              v-model="formData[item.value]"
              active-value="Y"
              inactive-value="N"
              class="ml-16px"
              @click="handleClick(formData[item.value], item)"
            />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<!--style-->
<style scoped lang="less">
.page {
  padding: 16px 16px 0;
  background: @white;
  border-radius: 6px;

  .page-title {
    margin-bottom: 16px;
    font-weight: bold;
    color: #333;
  }

  .config-item {
    display: flex;
    padding: 18px 16px;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    background: #f9f9f9;
    border-radius: 4px;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
